<!-- 步进器模块 -->
<section id="stepper" class="py-16 bg-light">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center max-w-2xl mx-auto mb-16">
      <div class="inline-block px-4 py-1 bg-primary/10 text-primary rounded-full text-sm font-medium mb-4">
        <?= $data['content']['sectionBadge']?>
      </div>
      <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-4">
        <?= $data['content']['sectionTitle']?>
      </h2>
      <p class="text-dark/70">
        <?= $data['content']['sectionSubtitle']?>
      </p>
    </div>
    
    <div class="relative">
      <!-- 步骤连接线 -->
      <div class="hidden md:block absolute left-1/2 top-16 bottom-16 w-0.5 bg-primary/20 transform -translate-x-1/2 z-0"></div>
      
      <!-- 步骤列表 -->
      <div class="space-y-12 relative z-10">
        <!-- 步骤1 -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
          <div class="md:text-right md:pr-12">
            <div class="inline-flex md:justify-end mb-4">
              <div class="w-12 h-12 bg-primary text-white rounded-full flex items-center justify-center font-bold text-lg">
                1
              </div>
            </div>
            <h3 class="text-xl font-bold mb-3">需求分析</h3>
            <p class="text-dark/70 mb-4">
              我们的专业团队与您深入沟通，了解您的业务需求和痛点，制定详细的需求文档。
            </p>
            <ul class="space-y-2 md:ml-auto max-w-md">
              <li class="flex items-center md:justify-end">
                <i class="fa fa-check text-primary mr-2 md:ml-2 md:order-1"></i>
                <span class="text-dark/70 md:order-0">业务需求调研</span>
              </li>
              <li class="flex items-center md:justify-end">
                <i class="fa fa-check text-primary mr-2 md:ml-2 md:order-1"></i>
                <span class="text-dark/70 md:order-0">现有系统评估</span>
              </li>
              <li class="flex items-center md:justify-end">
                <i class="fa fa-check text-primary mr-2 md:ml-2 md:order-1"></i>
                <span class="text-dark/70 md:order-0">需求文档编写</span>
              </li>
            </ul>
          </div>
          <div class="hidden md:block">
            <img src="images/step-1.jpg" alt="需求分析" class="w-full h-auto rounded-xl shadow-md">
          </div>
        </div>
        
        <!-- 步骤2 -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
          <div class="hidden md:block md:order-1">
            <img src="images/step-2.jpg" alt="方案设计" class="w-full h-auto rounded-xl shadow-md">
          </div>
          <div class="md:pl-12 md:order-0">
            <div class="inline-flex mb-4">
              <div class="w-12 h-12 bg-primary text-white rounded-full flex items-center justify-center font-bold text-lg">
                2
              </div>
            </div>
            <h3 class="text-xl font-bold mb-3">方案设计</h3>
            <p class="text-dark/70 mb-4">
              根据需求分析结果，我们的设计团队为您量身定制数字化解决方案，包括系统架构、功能模块和界面设计。
            </p>
            <ul class="space-y-2 max-w-md">
              <li class="flex items-center">
                <i class="fa fa-check text-primary mr-2"></i>
                <span class="text-dark/70">系统架构设计</span>
              </li>
              <li class="flex items-center">
                <i class="fa fa-check text-primary mr-2"></i>
                <span class="text-dark/70">功能模块规划</span>
              </li>
              <li class="flex items-center">
                <i class="fa fa-check text-primary mr-2"></i>
                <span class="text-dark/70">用户界面设计</span>
              </li>
            </ul>
          </div>
        </div>
        
        <!-- 步骤3 -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
          <div class="md:text-right md:pr-12">
            <div class="inline-flex md:justify-end mb-4">
              <div class="w-12 h-12 bg-primary text-white rounded-full flex items-center justify-center font-bold text-lg">
                3
              </div>
            </div>
            <h3 class="text-xl font-bold mb-3">开发实施</h3>
            <p class="text-dark/70 mb-4">
              我们的开发团队采用敏捷开发方法，确保项目按时交付，并保持与您的密切沟通。
            </p>
            <ul class="space-y-2 md:ml-auto max-w-md">
              <li class="flex items-center md:justify-end">
                <i class="fa fa-check text-primary mr-2 md:ml-2 md:order-1"></i>
                <span class="text-dark/70 md:order-0">敏捷开发迭代</span>
              </li>
              <li class="flex items-center md:justify-end">
                <i class="fa fa-check text-primary mr-2 md:ml-2 md:order-1"></i>
                <span class="text-dark/70 md:order-0">质量控制测试</span>
              </li>
              <li class="flex items-center md:justify-end">
                <i class="fa fa-check text-primary mr-2 md:ml-2 md:order-1"></i>
                <span class="text-dark/70 md:order-0">阶段性交付</span>
              </li>
            </ul>
          </div>
          <div class="hidden md:block">
            <img src="images/step-3.jpg" alt="开发实施" class="w-full h-auto rounded-xl shadow-md">
          </div>
        </div>
        
        <!-- 步骤4 -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
          <div class="hidden md:block md:order-1">
            <img src="images/step-4.jpg" alt="运维支持" class="w-full h-auto rounded-xl shadow-md">
          </div>
          <div class="md:pl-12 md:order-0">
            <div class="inline-flex mb-4">
              <div class="w-12 h-12 bg-primary text-white rounded-full flex items-center justify-center font-bold text-lg">
                4
              </div>
            </div>
            <h3 class="text-xl font-bold mb-3">运维支持</h3>
            <p class="text-dark/70 mb-4">
              系统上线后，我们提供7*24小时技术支持，确保系统稳定运行，并根据业务需求进行持续优化。
            </p>
            <ul class="space-y-2 max-w-md">
              <li class="flex items-center">
                <i class="fa fa-check text-primary mr-2"></i>
                <span class="text-dark/70">7*24小时技术支持</span>
              </li>
              <li class="flex items-center">
                <i class="fa fa-check text-primary mr-2"></i>
                <span class="text-dark/70">系统性能监控</span>
              </li>
              <li class="flex items-center">
                <i class="fa fa-check text-primary mr-2"></i>
                <span class="text-dark/70">持续优化升级</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>